Adwaita: rich-list styling
authorJakub Steiner <jimmac@gmail.com>
Mon, 17 Aug 2020 11:18:07 +0000 (13:18 +0200)
committerJakub Steiner <jimmac@gmail.com>
Thu, 20 Aug 2020 17:39:18 +0000 (19:39 +0200)
FIXME: why is the second list in Demo>List Box>Controls taller?

https://gitlab.gnome.org/GNOME/gtk/-/issues/3073

demos/widget-factory/widget-factory.ui
gtk/theme/Adwaita/_common.scss

index fccbb520d9b5881bfe4335309cc120130f38819a..dd9903ce7a7b365548d6acef794611df01a2cff8 100644 (file)
@@ -1643,10 +1643,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 1</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
@@ -1654,10 +1650,6 @@ microphone-sensitivity-medium-symbolic</property>
                                               <object class="GtkSwitch" id="listboxrow1switch">
                                                 <property name="halign">end</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
-                                                <property name="margin-start">12</property>
-                                                <property name="margin-end">12</property>
                                               </object>
                                             </child>
                                           </object>
@@ -1674,10 +1666,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 2</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
@@ -1685,10 +1673,6 @@ microphone-sensitivity-medium-symbolic</property>
                                               <object class="GtkScale" id="opacity">
                                                 <property name="halign">end</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
-                                                <property name="margin-start">12</property>
-                                                <property name="margin-end">12</property>
                                                 <property name="draw-value">0</property>
                                                 <property name="width-request">150</property>
                                                 <property name="adjustment">adjustment1</property>
@@ -1707,10 +1691,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 3</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
@@ -1719,10 +1699,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="icon-name">object-select-symbolic</property>
                                                 <property name="halign">end</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
-                                                <property name="margin-start">12</property>
-                                                <property name="margin-end">12</property>
                                                 <property name="opacity">0</property>
                                               </object>
                                             </child>
@@ -1740,10 +1716,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 4</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
@@ -1753,10 +1725,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="hexpand">1</property>
                                                 <property name="halign">end</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
-                                                <property name="margin-start">12</property>
-                                                <property name="margin-end">12</property>
                                               </object>
                                             </child>
                                           </object>
@@ -1773,10 +1741,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 5</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
@@ -1784,10 +1748,6 @@ microphone-sensitivity-medium-symbolic</property>
                                               <object class="GtkButton" id="listboxrow5button">
                                                 <property name="halign">end</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
-                                                <property name="margin-start">12</property>
-                                                <property name="margin-end">12</property>
                                                 <property name="icon-name">appointment-soon-symbolic</property>
                                               </object>
                                             </child>
@@ -1805,10 +1765,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 6</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
@@ -1816,10 +1772,6 @@ microphone-sensitivity-medium-symbolic</property>
                                               <object class="GtkCheckButton">
                                                 <property name="halign">end</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
-                                                <property name="margin-start">12</property>
-                                                <property name="margin-end">12</property>
                                               </object>
                                             </child>
                                           </object>
@@ -1835,10 +1787,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 7</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
@@ -1855,10 +1803,7 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 8</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
+
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
index 11e14836dfcd9843c0992364ae9d606c79f34f4f..519a4a89e145b71103427a224fb6b11f115136ed 100644 (file)
@@ -3072,7 +3072,7 @@ separator {
  * Lists *
  *********/
 listview,
-list, .rich-list {
+list  {
   color: $text_color;
   background-color: $base_color;
   border-color: $borders_color;
@@ -3083,7 +3083,7 @@ list, .rich-list {
     border-color: $backdrop_borders_color;
   }
 
-  > row { padding: 18px; }
+  > row { padding: 2px; }
   > row.expander { padding: 0px; }
   > row.expander .row-header { padding: 2px; }
 
@@ -3145,6 +3145,23 @@ row {
     background-color: $selected_bg_color;
   }
 
+/*******************************************************
+ * Rich Lists                                          *
+ * Large list usually containing lots of widgets       *
+ * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073    *
+ *******************************************************/
+
+
+.rich-list { /* rich lists usually containing other widgets than just labels/text */
+  & > row {
+    padding: 8px 12px;
+    min-height: 32px; /* should be tall even when only containing a label */
+
+    & > box {
+      border-spacing: 12px;
+    }
+  }
+}
 
 /*********************
  * App Notifications *